// 前台大屏动画
.frontend-layout {
  // 页面过渡动画
  .page-enter-active,
  .page-leave-active {
    transition: all 0.5s ease-out;
  }

  .page-enter-from {
    opacity: 0;
    transform: translateY(30px);
  }

  .page-leave-to {
    opacity: 0;
    transform: translateY(-30px);
  }

  // 渐变背景动画
  .gradient-bg {
    background: linear-gradient(45deg, var(--front-primary), var(--front-bg-secondary));
    background-size: 200% 200%;
    animation: gradientMove 10s ease infinite;
  }

  @keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  // 悬浮效果
  .hover-float {
    transition: transform 0.3s ease;
    &:hover {
      transform: translateY(-8px);
    }
  }

  // 光效果
  .shine-effect {
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
      );
      animation: shine 2s infinite;
    }
  }

  @keyframes shine {
    to {
      left: 150%;
    }
  }

  // 脉冲效果
  .pulse-effect {
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.05);
      opacity: 0.8;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  // 3D翻转效果
  .flip-card {
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.6s;

    &:hover {
      transform: rotateY(180deg);
    }
  }
} 